<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <style>
    .el-dialog__header{
      background-color: cyan;}
  </style>

</head>
</head>

<body>
  <div id="app">
    <!--第一行 输入框 搜索 新增 -->
    <el-form size="small" :inline="true" :model="form" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="form.name" placeholder="请输入名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button plain type="primary" @click="toAdd">新增</el-button>
      </el-form-item>
    </el-form>

    <div>
      <el-table :data="tableData" border style="width: 60%">
        <el-table-column label="序号" width="60" type="index" :index="1">
        </el-table-column>
        <el-table-column prop="date" label="日期" align="center">
        </el-table-column>
        <el-table-column prop="name" label="姓名" align="center">
        </el-table-column>
        <el-table-column prop="address" label="地址" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template v-slot="scope">
            <el-button @click="toEdit(scope.row)" type="primary" icon="el-icon-edit" circle></el-button>
            <el-button @click="toDel()"type="danger" icon="el-icon-delete" circle></el-button>

          </template>
          
        </el-table-column>
      </el-table>
    </div>
    <div calss="page" style="margin-top: 10px;">
      <el-pagination background :current-page="1" :page-sizes="[2, 5, 8, 10]" :page-size="5"
        layout="total, sizes, prev, pager, next, jumper" :total="10">
      </el-pagination>
    </div>
    <el-dialog :title="title" :visible.sync="visible">
      <el-form :model="formSave" size="small">
        <el-form-item label="日期" :label-width="formLabelWidth">
          <el-date-picker v-model="formSave.date" type="datetimerange" :picker-options="pickerOptions" range-separator="至"
            start-placeholder="开始日期" end-placeholder="结束日期" align="right">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="formSave.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input v-model="formSave.address" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
  <script>

    new Vue({
      el: '#app',
      data: {
        form: {
          title:"录入信息",
        },
        tableData: [{
          date: '2016-05-02',
          name: 'jisoo',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: 'jenne',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: 'lisa',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: 'rose',
          address: '上海市普陀区金沙江路 1516 弄'
        }],

        formLabelWidth: '120px',
        formSave: {},
        visible: false,
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },

      },
      methods: {
        toAdd(){
          this.visible = true;
          this.title='录入信息';
          this.formSave={};
        },//新增
        toEdit(row){
          console.log(row,"获取当前行数据");
          this.visible = true;
          this.title='修改信息';
          this.formSave={...row};
        },//编辑
        toDel(index){
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
        }
      },
    })
  </script>

</body>

</html>